<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="right" @click="showFootHandle = true" v-if="!showFootHandle">
				选择
			</div>
			<div slot="right" @click="hideFoot" v-if="showFootHandle">
				取消
			</div>
		</my-header>
		<div class="cont-nof" :class="showFootHandle?'cont':''">
			<div class="album fl addAlbum" @click="addAlbumFn" v-if="!showFootHandle">
				<div class="max">
					+
				</div>
			</div>
			<div class="album fl pr" v-for="item in list">
				<!-- 选择框 -->
				<div class="weui-cells weui-cells_checkbox daily-select" v-if="showFootHandle" style="background: none;">
					<label class="weui-cell weui-check__label my-weui-cell-select" style="background: none;">
						<div class="weui-cell__hd my-weui-cell__hd">
							<input type="checkbox" class="weui-check" v-model="item.isSelect" @click="selectItem(item)">
							<i class="weui-icon-checked"></i>
						</div>
					</label>
				</div>
				<div @click="addPhoto(item.id)">
					<div class="albumUrl">
						<img :src="item.frontCover" alt="">
					</div>
					<div class="albumInfo">
						<div class="tl albumName">{{item.name}}</div>
						<div class="tl">共 {{item.imageList.length}} 张</div>
						<div class="tr">{{item.createTime}}</div>
					</div>
				</div>
			</div>
			<a href="javascript:void(0);" class="weui-cell weui-cell_link" v-if="parmas.current*parmas.size<=parmas.total">
				<div class="weui-cell__bd" @click="loadmore">查看更多</div>
			</a>
		</div>
		<!-- 弹出框 -->
		<div v-if="postForm.visible">
			<div class="weui-mask"></div>
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">新建相册</strong></div>
				<div class="weui-dialog__bd">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" placeholder="请输入相册名" v-model="tempName" maxlength="10">
							<div class="weui-textarea-counter"><span>{{tempName.length}}</span>/10</div>
						</div>
					</div>
				</div>
				<div class="weui-dialog__ft">
					<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="handle(false)">取消</a>
					<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="handle(true)">确定</a>
				</div>
			</div>
		</div>
		<div class="flex footHandle" v-if="showFootHandle">
			<div class="weui-cells weui-cells_checkbox select-all" style="margin-top: 0;width: auto;margin: inherit;">
				<label class="weui-cell weui-check__label my-weui-cell-select">
					<div class="weui-cell__bd" style="margin-right: 1rem;">
						<p class="select-text" style="white-space: nowrap;">全选</p>
					</div>
					<div class="weui-cell__hd my-weui-cell__hd">
						<input type="checkbox" class="weui-check" v-model="isSelectAll" @click="selectAll">
						<i class="weui-icon-checked"></i>
					</div>
				</label>
			</div>
			<div>
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn fr" @click="delFn">删除</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tempName: '',
				postForm: {
					visible: false,
					name: '',
				},
				parmas: {
					size: 10,
					current: 1
				},
				showFootHandle: false,
				isSelectAll: false,
				isSelectNum: 0,
			}
		},
		methods: {
			selectAll() { //全选
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = !this.isSelectAll;
				}!this.isSelectAll ? this.isSelectNum = this.list.length : this.isSelectNum = 0;
			},
			selectItem(item) { //单选
				item.isSelect = !item.isSelect;
				item.isSelect ? this.isSelectNum++ : this.isSelectNum--
				this.isSelectNum === this.list.length ? this.isSelectAll = true : this.isSelectAll = false;
			},
			hideFoot() { //取消
				this.showFootHandle = false;
				this.isSelectAll = false;
				this.isSelectNum = 0;
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = false;
				}
			},
			loadmore() {
				this.parmas.size += 10;
				this.queryFn();
			},
			addAlbumFn() { //新建相册
				this.postForm.visible = true;
			},
			handle(io) {
				let _this = this;
				this.postForm.visible = false;
				if (io) {
					this.postForm.name = this.tempName;
					//提交 或者 新增后提交
					this.$toast.show('创建中', 'loading');
					this.$http.postAlbumMain(this.postForm).then(resp => {
						this.$toast.hide();
						this.$toast.show('创建成功', 'success');
						setTimeout(function() {
							_this.$toast.hide();
							_this.queryFn();
						}, 1000)
					})
				}
				this.tempName = '';
			},
			addPhoto(id) {
				if (!this.showFootHandle) {
					this.$router.push({
						path: '/addPhoto',
						query: {
							id: id,
						}
					})
				}
			},
			queryFn() {
				this.$toast.show('获取相册列表', 'loading');
				this.$http.fetchAlbumMain(this.parmas).then(resp => {
					this.$toast.hide();
					this.list = resp.data.records;
					this.parmas.size = resp.data.size;
					this.parmas.current = resp.data.current;
					this.parmas.total = resp.data.total;
				})
			},
			delFn() { //删除动态
				let ids = this.list.filter(file => file.isSelect).map(file => file.id).join(",");
				if (!ids) {
					this.$weui.topTips('请选择相册');
					return;
				}
				this.$http.deleAlbumMain({
					ids: ids
				}).then(resp => {
					this.$weui.toast('删除成功');
					this.showFootHandle = false;
					this.isSelectAll = false;
					this.queryFn();
				})
			},
		},
		created() {
			this.queryFn();
		}
	}
</script>

<style scoped>
	.album,.addAlbum {
		width: 50%;
		height: 21.1rem;
		padding: 1rem;
		box-sizing: border-box;
	}
	
	.album .albumUrl {
		width: 90%;
		height: 12rem;
		margin: 0 auto 0.5rem auto;
		background: #D9D9D9;
		border-radius: 4px;
		overflow: hidden;
	}

	.albumUrl img {
		height: 100%;
		width: auto;
	}

	.album .albumInfo {
		width: 90%;
		margin: auto;
		height: 6rem;
		padding: 0 0 0.5rem 0;
		border-bottom: 1px solid #D9D9D9;
	}

	.albumInfo>div {
		font-size: 1.2rem;
		line-height: 2rem;
		height: 2rem;
	}

	.albumName {
		font-size: 1.4rem;
	}

	.addAlbum>div {
		background: #D9D9D9;
		width: 90%;
		height: 100%;
		border-radius: 4px;
		color: #fff;
		font-size: 10rem;
		line-height: 19.1rem;
		margin: auto;
	}

	.footHandle {
		background: #fff;
		height: 4.4rem;
		justify-content: space-between;
		padding: 0 1rem;
		box-sizing: border-box;
	}
</style>
